﻿<mockups:WindowsPhoneChrome 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:mockups="clr-namespace:Microsoft.Expression.Prototyping.WindowsPhone.Mockups;assembly=WindowsPhone.Mockups"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:wp="http://schemas.microsoft.com/prototyping/2010/controls/windowsphone" xmlns:pc="http://schemas.microsoft.com/prototyping/2010/controls"
    mc:Ignorable="d"
    x:Class="MS_SocialPhotoSketchScreens.Screen_1"
    x:Name="PhoneChrome">
	<mockups:WindowsPhoneChrome.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="ProjectDataSources.xaml"/>
			</ResourceDictionary.MergedDictionaries>
			<DataTemplate x:Key="ItemTemplate">
				<StackPanel>
					<Image Source="{Binding Image}" HorizontalAlignment="Left" Height="64" Width="64"/>
					<TextBlock Text="{Binding Name}" Height="20" Width="64" Style="{StaticResource BasicTextBlock-Sketch}"/>
				</StackPanel>
			</DataTemplate>
		</ResourceDictionary>
	</mockups:WindowsPhoneChrome.Resources>
    <i:Interaction.Triggers>
    	<i:EventTrigger EventName="OrientationChanged">
    		<i:Interaction.Behaviors>
    			<ei:ConditionBehavior>
    				<ei:ConditionalExpression>
    					<ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
    						RightOperand="Landscape" />
    				</ei:ConditionalExpression>
    			</ei:ConditionBehavior>
    		</i:Interaction.Behaviors>
    		<mockups:GoToStateAction StateName="Landscape"
    			TargetObject="{Binding ElementName=LayoutRoot}"
    			TargetName="LayoutRoot" />
    	</i:EventTrigger>
    	<i:EventTrigger EventName="OrientationChanged">
    		<i:Interaction.Behaviors>
    			<ei:ConditionBehavior>
    				<ei:ConditionalExpression>
    					<ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
    						RightOperand="Portrait" />
    				</ei:ConditionalExpression>
    			</ei:ConditionBehavior>
    		</i:Interaction.Behaviors>
    		<mockups:GoToStateAction StateName="Portrait"
    			TargetObject="{Binding ElementName=LayoutRoot}"
    			TargetName="LayoutRoot" />
    	</i:EventTrigger>
    </i:Interaction.Triggers>

    <mockups:WindowsPhoneChrome.BackButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
            	<i:EventTrigger EventName="Click">
            		<pi:NavigateBackAction />
            	</i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/back.png" />
        </Button>
    </mockups:WindowsPhoneChrome.BackButton>

    <mockups:WindowsPhoneChrome.HomeButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
            	<i:EventTrigger EventName="Click">
            		<pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Home" />
            	</i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/home.png" />
        </Button>
    </mockups:WindowsPhoneChrome.HomeButton>

    <mockups:WindowsPhoneChrome.SearchButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
            	<i:EventTrigger EventName="Click">
            		<pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Search" />
            	</i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/search.png" />
        </Button>
    </mockups:WindowsPhoneChrome.SearchButton>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ImageDataSource}}">
    	<Grid.RowDefinitions>
    		<RowDefinition/>
    	</Grid.RowDefinitions>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager />
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
        	<VisualStateGroup x:Name="CommonStates"
        		ei:ExtendedVisualStateManager.UseFluidLayout="True">
        		<VisualState x:Name="Portrait" />
        		<VisualState x:Name="Landscape">
        			<Storyboard>
        				<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(WindowsPhoneChrome.PageOrientation)"
        					Storyboard.TargetName="PhoneChrome">
        					<DiscreteObjectKeyFrame KeyTime="0">
        						<DiscreteObjectKeyFrame.Value>
        							<mockups:PageOrientation>Landscape</mockups:PageOrientation>
        						</DiscreteObjectKeyFrame.Value>
        					</DiscreteObjectKeyFrame>
        				</ObjectAnimationUsingKeyFrames>
        			</Storyboard>
        		</VisualState>
        	</VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    	<wp:Pivot Title="Social Photo" FontSize="24">

    		<wp:PivotItem Header="Favorite photo">
    			<Grid>
    				<Grid.RowDefinitions>
    					<RowDefinition Height="*"/>
						<RowDefinition Height="auto"/>			
					</Grid.RowDefinitions>			
					 <ListBox DataContext="{Binding}" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}">
					 	<i:Interaction.Triggers>
					 		<i:EventTrigger EventName="SelectionChanged">
					 			<pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.PhotoDetailPage"/>
					 		</i:EventTrigger>
					 	</i:Interaction.Triggers>
    					<ListBox.ItemsPanel>
    						<ItemsPanelTemplate>
    							<toolkit:WrapPanel Width="450"/>
    						</ItemsPanelTemplate>
    					</ListBox.ItemsPanel>			
    				</ListBox>
    			 <mockups:ApplicationBarMockup Grid.Row="1">
    			 	<mockups:ApplicationBarMockup.IconButtonsContent>
    			 		<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
    			 			<mockups:ApplicationBarIconButton Content="Take" ImageSource="/AppBarIcons/camera.png"/>
    			 			<mockups:ApplicationBarIconButton Content="Share" ImageSource="/AppBarIcons/cancel.png"/>
    			 		</StackPanel>
    			 	</mockups:ApplicationBarMockup.IconButtonsContent>
    			 	<mockups:ApplicationBarMockup.MenuItemsContent>
    			 		<StackPanel>
    			 			<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Take"/>
    			 			<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Share"/>
    			 		</StackPanel>
    			 	</mockups:ApplicationBarMockup.MenuItemsContent>
    			 </mockups:ApplicationBarMockup>
				</Grid>
    			
				
    			
    		</wp:PivotItem>
    		<wp:PivotItem Header="My photo">
    			<Grid Height="643" Width="456">
    				<Grid.RowDefinitions>
    					<RowDefinition Height="*"/>
    					<RowDefinition Height="auto"/>			
    				</Grid.RowDefinitions>			
    				<ListBox DataContext="{Binding}" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}">
    					<ListBox.ItemsPanel>
    						<ItemsPanelTemplate>
    							<toolkit:WrapPanel Width="450"/>
    						</ItemsPanelTemplate>
    					</ListBox.ItemsPanel>			
    				</ListBox>
    				<mockups:ApplicationBarMockup Grid.Row="1">
    					<mockups:ApplicationBarMockup.IconButtonsContent>
    						<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
    							<mockups:ApplicationBarIconButton Content="Take" ImageSource="/AppBarIcons/camera.png"/>
    							<mockups:ApplicationBarIconButton Content="Share" ImageSource="/AppBarIcons/cancel.png"/>
    						</StackPanel>
    					</mockups:ApplicationBarMockup.IconButtonsContent>
    					<mockups:ApplicationBarMockup.MenuItemsContent>
    						<StackPanel>
    							<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Take"/>
    							<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Share"/>
    						</StackPanel>
    					</mockups:ApplicationBarMockup.MenuItemsContent>
    				</mockups:ApplicationBarMockup>
    			</Grid>
    		</wp:PivotItem>
    	</wp:Pivot>
    </Grid>
</mockups:WindowsPhoneChrome>